

{% block extra_libraries %}
<!--<script type="text/javascript" src="/_ah/channel/jsapi"></script>-->
<script src="/static/javascript/highcharts/highcharts.js" type="text/javascript"></script>
<script src="/static/javascript/highcharts/exporting.js" type="text/javascript"></script>
{% endblock %}

{% block content %}

<!--<div id="menu-toolbar" class="ui-state-active">
    <ul class ="right">
        <li></li>
    </ul>
    <ul class ="left">
        <li><a href="/?id_it={{ iteration.key.id }}">{{ iteration.name }}</a></li>
        <li>&raquo;</li>
        <li><a href="/iterations?project_id={{ iteration.project.key.id }}">{{ iteration.project.name }}</a></li>
    </ul>
</div>-->

<div id ="title-container">
    <h2>Review - <a href="/iterations?project_id={{ iteration.project.key.id }}">{{ iteration.project.name }}</a> &raquo;
        <a href="/?id_it={{ iteration.key.id }}">{{ iteration.name }}</a></h2>
</div>

<div id="chart_container" style="min-width: 400px; height: 250px; margin: 0 auto"></div>
<div><a href="#" id="id_create_story_link" >Move stories</a></div>
<div id="table-contain" class="ui-widget">
    <table class="ui-widget ui-widget-content">
        <col width="15%" />
        <thead>
            <tr class="ui-widget-header" >
                <th>Tasks\Users</th>
                {% for member in iteration.get_project.get_members %}
                <th>{{ member.user.nickname }}</th>
                {% endfor%}
            </tr>
        </thead>
        <tbody>
            {% for items in iteration.get_tasks_summary %}
            <tr>
                {% for item in items %}
                {% if forloop.first %}
                <th class="ui-widget-header">{{ item }}</th>
                {% else %}
                <td>{{ item }}</td>
                {% endif %}
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div>
    <div id="dialog-support_history" title="History">
    </div>
</div>
<div id="stories">
    {% for story in iteration.get_stories %}
    <div class="story">
        <div class="title">
            <span>[</span>
            <span id="status_{{ story.key.id}}">{{ story.status}}</span>
            <span>]</span>
            <span class="name">
                <a href="#" id="title_{{ story.key.id}}" name="{{ story.key.id}}" title="Show details">{{ story.name|escape }}</a>
            </span>
        </div>
        <div class="progress_container">
            <div class="time_progress float_left" id="pb_{{ story.key.id }}" val="{{ story.percentage }}" ></div>
            <div class="time_detail float_left" >
                <span class="date" dir="ltr"> Assigned to:
                    <a href="#" name="BugEvent.23">{{ story.assigned_to }}</a>
                </span>&nbsp;|&nbsp;
                <span class="date" dir="ltr"> original:
                    <a href="#" name="BugEvent.23">{{ story.estimated_time }}</a>
                    hrs
                </span>&nbsp;|&nbsp;
                <span class="date" dir="ltr"> current:
                    <a href="#" id="current_time_id">{{ story.elapsed_time }}</a>
                    hrs
                </span>&nbsp;|&nbsp;
                <span class="date" dir="ltr"> percentage:
                    <a href="#" id="percentage_id">{{ story.percentage }}</a>
                </span>
            </div>
        </div>
        <div id="story_box_{{story.key.id}}" style="display: none" class="story_body">
            <div class="note  ui-corner-all">
                <div class="header ui-widget-content ui-corner-top">
                    <span>Description</span>
                </div>
                <div class="body ui-widget-content ui-corner-bottom">
                    <span><pre class="text">{{ story.description|escape}}</pre></span>
                </div>
            </div>
            <div class="note  ui-corner-all">
                <div class="header ui-widget-content ui-corner-top">
                    <span class="action">Observation</span>&nbsp;
                    <span class="person"><a href="#">{{ story.opened_by }}</a></span>&nbsp;
                    <span>{{story.opened_date|date:"D, M j, Y"}}</span>
                    <nobr>
                        <span style="cursor: pointer;" id="edit_support_{{ story.key.id }}" val="{{ story.key.id }}">
                            <span>
                                <img src="/static/css/images/edit.png"
                                     width="16" height="16" border="0" alt="Edit" title="Edit"></span></span>
                    </nobr>
                    <span class="person"><a href="#" id="show_history_{{ story.key.id }}" val="{{ story.key.id }}">History</a></span>
                </div>
                <div class="body ui-widget-content ui-corner-bottom">
                    <span id="id_desc_{{story.key.id}}"><pre id="id_desc_pre_{{story.key.id}}" class="text">{{ story.get_justification.text }}</pre></span>
                    <div id="edit_form_{{ story.key.id }}" class="hide">
                        <form action="/edit_support_comment" method="post" id="edit_support_form_{{ story.key.id }}">
                            <input type="hidden" name="story_id" id="story_id" value="{{ story.key.id }}">
                            <li>
                                <textarea cols="50" rows="5"  id="description_{{ story.key.id }}" name="description" class="text ui-widget-content ui-corner-all" ></textarea>
                            </li>
                            <li>
                                <input type="submit" value="Save">
                                <input type="submit" id="desc_cancel" value="Cancel">
                            </li>
                        </form>
                    </div>
                </div>
                <div id="bugeventBody_22" class="attachments">
                    <div id="containerAttachmentList_22"></div>
                </div>
            </div>
            <div id="tabs-1" class="comments">
                <ul>
                    <li>
                        <ul id="comments_{{story.key.id}}" class="commentList">
                            {% for comment in story.review_comments %}
                            <li>
                                <div>
                                    <a href="#" >{{comment.author.nickname}}</a>
                                    <span >{{comment.text}}</span>
                                </div>
                            </li>
                            {% endfor %}
                        </ul>
                    </li>
                    <li>
                        <div>
                            <form action="/comment_review_story" method="post" id="commentForm_{{ story.key.id }}">
                                <input type="hidden" name="story_id" value="{{ story.key.id }}">
                                <div>
                                    <div>
                                        <textarea name="comment" title="Write a comment..." placeholder="Write a comment..." class="text ui-widget-content ui-corner-all" ></textarea>
                                    </div>
                                    <div>
                                        <input value="Comment" name="comment" type="submit" >
                                    </div>
                                </div>
                            </form>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
<div id="chat_container" class="round_border min">
    <div>
        <span>Chat...</span>
        <a class="float_right" href="#" id="id_m">Max-Min</a>
    </div>
    <div id="messages">
        {% for message in iteration.review_messages %}
        <div>
            <span class='user'>{{ message.user.nickname }}</span><pre class='msg'>{{ message.text }}</pre>
        </div>
        {% endfor %}
    </div>
    <div class="text_form">
        <form action="/review_chat" method="post" id="chat_form">
            <input type="hidden" name="iteration_id" value="{{iteration.key.id}}">
            <textarea name="message" id="id_text_chat" title="Write a meesage..." placeholder="Write a message..." class="text ui-widget-content ui-corner-all" ></textarea>
        </form>
    </div>
</div>

<div id="move_form" class="form_container" title="Move Stories" >
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/move_stories" method="post" id="moveForm">
        <fieldset>
            <ol>
                <li>
                    <label for="id_container">Move to:</label>
                    <select name="des_iteration" id="id_container" class="select ui-widget-content ui-corner-all">
                        {% for container in iteration.get_containers %}
                        <option value="{{ container.key }}">{{ container.name }}</option>
                        {% endfor %}
                    </select>
                </li>
                <li>
                    <label for="id_container">Stories:</label>
                    <input type="radio" name="select" value="true" >All
                    <input type="radio" name="select" value="false">None
                </li>
                <li>
                    {% for story in iteration.get_active_stories %}
                    <input type="checkbox" name="story" value="{{ story.key.id }}" >{{ story.name }}<br>
                    {% endfor %}
                </li>
            </ol>
        </fieldset>
    </form>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('div:[id^=pb_]').each(function() {
            var percentage = parseFloat($(this).attr('val'));
            $(this).progressbar({value:percentage});
        });
//        var UIUpdater = {
//            chat: function(data){
//                var str ="<div><div><span class='user'>"+data.user+"</span><pre class='msg'>"+data.message+'</pre></div></div>';
//                var html = $(str).html();
//                $('#messages').append(html);
//            },
//            comment: function(data) {
//                var str ='<div><li><div><a href="#" >'+data.user+'</a> <span>'+data.comment+'</span></div></li></div>';
//                var html = $(str).html();
//                $('#comments_'+data.story_id).append(html);
//            },
//            status: function(data) {
//                $('#status_'+data.story_id).text(data.status);
//            },
//            justification: function(data) {
//                $('#id_desc_pre_'+data.story_id).text(data.text);
//            }
//        }
//
//        UIUpdater.execute = function ( name ) {
//            return UIUpdater[name] && UIUpdater[name].apply( UIUpdater, [].slice.call(arguments, 1) );
//        };
//
//        onOpened = function() {
//            console.log('opened..........');
//        };
//        onMessage = function(m) {
//            var data = $.parseJSON(m.data);
//            UIUpdater.execute(data.event, data.args);
//        };
//        onError = function() {
//            alert("Error => "+err.description);
//        };
//        onClose = function() {
//            alert("channel closed");
//        };
//        var token = '{{ token }}';
//        var channel = new goog.appengine.Channel(token);
//        var socket = channel.open();
//        socket.onopen = onOpened;
//        socket.onmessage = onMessage;
//        socket.onerror =  onError;
//        socket.onclose =  onClose;
        
        $('#id_text_chat').keydown(function(event) {
            if (event.keyCode == 13) {
                $( this ).parent().submit();
                return false;
            }
        });

        $("#chat_form").submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            message = $form.find( 'textarea[name="message"]' ).val(),
            iteration_id = $form.find( 'input[name="iteration_id"]' ).val(),
            url = $form.attr( 'action' );
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                data: { message: message, iteration_id: iteration_id },
                success: function(data) {
                    $form.find( 'textarea[name="message"]' ).val('');
                }
            });
        });

        $('form:[id^=commentForm_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            comment = $form.find( 'textarea[name="comment"]' ).val(),
            url = $form.attr( 'action' ),
            story_id = $form.find( 'input[name="story_id"]' ).val();
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                data: { comment:comment, story_id: story_id  },
                success: function(data) {
                    $form.find( 'textarea[name="comment"]' ).val('');
                }
            });
        });
        $(function() {
            $( "input:submit").button();
        });
        
        $('a:[id^=title_]').click(function(event) {
            event.preventDefault();
            $('#story_box_'+$(this).attr('name')).toggle('slow', function() {
                // Animation complete.
            });
        });

        $( "#dialog-support_history" ).dialog({
            autoOpen: false,
            height: 300,
            width: 600,
            modal: true,
            buttons: {
                Close: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                $("#dialog-support_history").empty();
            }
        });
        $('a:[id^=show_history_]').click(function(event) {
            event.preventDefault();
            $( "#dialog-support_history" ).dialog( "open" );
            updateHistory($(this).attr('val'));
        });
        updateHistory = function (id) {
            $.ajax({
                type: 'POST',
                url: '/get_support_history',
                dataType: 'json',
                data: { id: id },
                success: function(data) {
                    $.each(data.history, function(index, data) {
                        $("#dialog-support_history").append("<li>" + data.user + " : " + data.text + "</li>");
                    });
                }
            });
        };
        $('span:[id^=edit_support_]').click(function() {
            var id = $(this).attr('val');
            var str = $('#id_desc_pre_' + id).text();
            $('#description_' + id).val(str);
            $('#edit_form_'+id).removeClass('hide');
            $('#id_desc_'+id).addClass('hide');
        });
        $("form input[type=submit]").click(function() {
            $(this).attr("clicked", "true");
        });
        
        $('form:[id^=edit_support_form_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            desc = $form.find( 'textarea[name="description"]' ).val(),
            url = $form.attr( 'action' ), story_id = $form.find( 'input[name="story_id"]' ).val(),
            source = $form.find( 'input[type=submit][clicked=true]' ).val();
            if (source.toLowerCase() == 'save') {
                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: { text: desc, story_id: story_id  },
                    success: function(data) {
                        $('#edit_form_'+story_id).addClass('hide');
                        $('#id_desc_'+story_id).removeClass('hide');
                    }
                });
            } else {
                $('#edit_form_'+story_id).addClass('hide');
                $('#id_desc_'+story_id).removeClass('hide');
            }
        });

        $(function() {
            $("button.save" ).button({
                icons: {
                    primary: "ui-icon-circle-check"
                },
                text: false
            });
        });
        $(function() {
            $("button.cancel" ).button({
                icons: {
                    primary: "ui-icon-circle-close"
                },
                text: false
            });
        });
        $( "#move_form" ).dialog({
            autoOpen: false,
            height: 400,
            width: 480,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $( '#moveForm' ),
                    url = $form.attr( 'action' ),
                    data = $form.serialize();
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                        },
                        error: function (request, status, error) {
                            alert(request.responseText);
                            alert(error);
                        }
                    });
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                //                resetStoryForm();
            }
        });
        $( "#id_create_story_link" ).click(function(event) {
            event.preventDefault();
            $( "#move_form" ).dialog( "open" );
        });

        $('#id_m').click(function(event) {
            event.preventDefault();
            $( '#chat_container' ).toggleClass('min');
        });
        $( 'input[type=radio][name="select"]' ).click(function(event) {
            var val = $( this ).val();
            checkStories(eval(val));
        });
        function checkStories(value) {
            $( 'input[type=checkbox][name="story"]' ).attr("checked", value);
        }
        
        var categories = new Array(), data = new Array(), current = new Array();
        '{% for uh in iteration.get_user_hours_worked %}'
        categories.push('{{uh.0}}');
        data.push(parseFloat('{{uh.1}}'));
        current.push(parseFloat('{{uh.2}}'));
        '{% endfor %}'

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart_container',
                type: 'column'
                //                margin: [ 50, 50, 100, 80]
            },
            title: {
                text: "Current time"
            },
            subtitle: {
                text: 'User vs Time'
            },
            xAxis: {
                categories: categories
                //                    [
                //                    'ram.rioja',
                //                    'dev.java',
                //                    'dev.js',
                //                    'dev.car'
                //                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Time (hrs)'
                }
            },
            legend: {
                align: 'left',
                verticalAlign: 'top',
                x: 40,
                y: 20,
                floating: true,
                borderWidth: 0
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        Highcharts.numberFormat(this.y, 1) +
                        ' hours';
                }
                //
                //                formatter: function() {
                //                    return ''+
                //                        this.x +': '+ this.y +' hrs';
                //                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                    name: 'Estimated',
                    data: data,//[49.9, 50, 30, 25.5],
                    dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: '#FFFFFF',
                        align: 'right',
                        x: -3,
                        y: 10,
                        formatter: function() {
                            return this.y;
                        },
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },{
                    name: 'Current',
                    data: current,//[49.9, 50, 30, 25.5],
                    dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: '#FFFFFF',
                        align: 'right',
                        x: -3,
                        y: 10,
                        formatter: function() {
                            return this.y;
                        },
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                }]
        });


        var methos = {
            comment: function(data) {
                var str ='<div><li><div><a href="#" >'+data.user+'</a> <span>'+data.comment+'</span></div></li></div>';
                var html = $(str).html();
                $('#comments_'+data.story_id).append(html);
            },
            status: function(data) {
                $('#status_'+data.story_id).text(data.status);
            },
            justification: function(data) {
                $('#id_desc_pre_'+data.story_id).text(data.text);
            }
        };
        addCallBackMethods(methos);
    });
</script>

{% endblock %}
